<template>
  <div>       
    <el-card>
      <!--搜索表单-->
      <el-form :inline='true' :model='searchForm' class='demo-form-inline'>
            <el-form-item label='名称'>
                <el-input size='small' v-model='searchForm.name' placeholder='请输入用户名'></el-input>
            </el-form-item>
            <el-form-item label='状态'>
                <el-select size='small' v-model='searchForm.status' placeholder='请选择'>
                <el-option label='开启' value=1></el-option>
                <el-option label='禁用' value=2></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click='search' type='warning' size='small' icon='el-icon-search'>查 询</el-button>
                <el-button @click='add' type='primary' size='small' icon='el-icon-plus'>新 增</el-button>
            </el-form-item>
        </el-form>
      <!-- 搜索表单 -->
      <el-table  v-loading="listLoading" fit border :data='tableData.list'  style='width: 100%'>
        <el-table-column align='center' type='index' label='编号' width='50'>
           <template slot-scope="scope">
            {{tableData.pageNumber!==1?scope.$index+1 +  tableData.pageSize * (tableData.pageNumber-1):scope.$index +  tableData.pageNumber}}
            </template>
        </el-table-column>
        <el-table-column align='center' label='名称'>
            <template slot-scope='scope'>
                {{scope.row.name}}
            </template>
        </el-table-column>
        <el-table-column prop='num' label='探头编号'>
        </el-table-column>
        <!-- <el-table-column label='负责人'>
            <template slot-scope='scope'>
                <span style='float:left;'>{{scope.row.manager==null?'无':scope.row.manager}}</span>
            </template>
        </el-table-column>               -->
        <!-- <el-table-column prop='address' label='地址'>
        </el-table-column>
        <el-table-column prop='phone' label='手机号' width="150">
        </el-table-column> -->
        <el-table-column label='状态'>
          <template slot-scope='scope'>
                <el-tag :type="scope.row.status==1?'success':'danger'"><span>{{scope.row.status==1?'开启':'禁用'}}</span></el-tag>
            </template>
        </el-table-column>
        <!-- <el-table-column label='描述'>
          <template slot-scope='scope'>
                <span>{{scope.row.des==null?'无':scope.row.des}}</span>
            </template>
        </el-table-column> -->
        <el-table-column label='更新时间'>
          <template slot-scope='scope'>
             <span>{{scope.row.update_time==null?'暂无更改':scope.row.update_time}}</span>
            </template>
        </el-table-column>
        <el-table-column align='center' label='操作' width='300' >
            <template slot-scope='scope'>
                <el-button @click.native='edit(scope.$index)' size='mini' icon='el-icon-edit' type='primary'>编辑</el-button>
                <el-button @click='del(scope.$index)' size='mini' icon='el-icon-delete' type='danger'>删除</el-button>
                <el-button @click='detail(scope.$index)' size='mini'><i class='iconfont icon-xiangqing1' style="color:#409EFF"></i>&nbsp;温度数据 </el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class='page'>
        <el-pagination  @current-change='handleCurrentChange' :current-page.sync='tableData.pageNumber' :page-size='tableData.pageSize' layout='total, prev, pager, next, jumper' :total='tableData.totalRow'>
        </el-pagination>
      </div>
        <!-- <EditDialog :getData="getData" :dialogData='dialogData' :dialogVisible="dialogVisible" :title="title" :isCreate="isCreate"></EditDialog> -->
         <el-dialog :visible.sync="dialogVisible"  :before-close="handleClose" :title="isCreate?title.titleAdd:title.titleEdit" width="800px">
           <el-form :rules="rules" ref="dialogData" :model="dialogData" label-position="right" label-width="180px" >
            <el-form-item label="设备名:" prop="name">
                <el-input class="Iwidth" v-model="dialogData.name"></el-input>
            </el-form-item>
            <el-form-item label="探头编号" prop="name">
                <el-input class="Iwidth" v-model="dialogData.num"></el-input>
            </el-form-item>
          </el-form><span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
            <el-button v-show="!isCreate" @click="update(1)" size="mini" type="primary">修 改</el-button>
            <el-button v-show="isCreate" @click="update(2)" size="mini" type="primary">保 存</el-button>
          </span>
         </el-dialog>
         </el-card>
  </div>
</template>
<script>
import {
  getEquipData,
  getEquipDetail,
  updateInfo,
  delEquip
} from '@/api/table'
export default {
  data() {
    const validatePhone = (rule, value, callback) => {
      var reg = /^1[3,4,5,7,8]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('手机号格式不对'))
      } else {
        callback()
      }
    }
    return {
      searchForm: {
        // 搜索表单de数据
        name: '',
        status: null
      },
      listLoading: false,
      title: {
        titleAdd: '添加设备',
        titleEdit: '编辑设备'
      },
      tableData: {}, // 表格数据及分页数据
      dialogData: {
        // 编辑的dialog表单
      },
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        num: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      dialogVisible: false,
      isCreate: false,
      status: null,
      statusOptions: [
        {
          value: 1,
          label: '开启'
        },
        {
          value: 2,
          label: '禁用'
        }
      ]
    }
  },
  created() {
    this.getData(this.$route.query.station_id)
  },
  methods: {
    getData(id, name, status, curr) {
      this.listLoading = true
      // return new Promise((resole, reject) => {
      getEquipData(
        this.$route.query.station_id,
        name,
        status,
        curr
      ).then(res => {
        this.tableData = res.content
        this.listLoading = false
        // resole(res)
      })
      // })
    },
    update(i) {
      var p
      this.$refs.dialogData.validate(valid => {
        if (valid) {
          if (i === 1) {
            p = {
              'equipment.id': this.dialogData.id,
              'equipment.station_id': this.$route.query.station_id,
              'equipment.name': this.dialogData.name,
              'equipment.num': this.dialogData.num
            }
            updateInfo(p).then(res => {
              this.$message({
                message: '恭喜你，修改成功！！！',
                type: 'success'
              })
              this.dialogVisible = false
              this.getData()
            })
          } else if (i === 2) {
            p = {
              'equipment.station_id': this.$route.query.station_id,
              'equipment.name': this.dialogData.name,
              'equipment.num': this.dialogData.num
            }
            updateInfo(p).then(res => {
              this.$message({
                message: '恭喜你，保存成功！！！',
                type: 'success'
              })
              this.dialogVisible = false
              this.getData()
            })
          }
        }
      })
    },
    handleClose(done) {
      done()
    },
    select() {
      this.dialogData.status = this.status
    },
    add() {
      this.dialogData = {}
      this.dialogData.status = 1
      this.dialogVisible = true
      this.isCreate = true
    },
    edit(index) {
      var id = this.tableData.list[index].id
      getEquipDetail(id).then(res => {
        this.dialogData = res.content

        this.dialogVisible = true
        this.isCreate = false
      })
    },
    del(index) {
      var id = this.tableData.list[index].id
      this.$confirm('确认删除?')
        .then(_ => {
          delEquip(id).then(res => {
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            })
            this.getData('', '', '', this.tableData.pageNumber)
          })
        })
        .catch(_ => {
          this.$message({
            showClose: true,
            message: '取消删除',
            type: 'warning'
          })
        })
    },
    detail(index) {
      var id = this.tableData.list[index].id
      this.$router.push({ path: 'TemperatureEquipmentData', query: { id }})
    },
    search() {
      this.getData(
        this.$route.query.station_id,
        this.searchForm.name,
        this.searchForm.status,
        this.tableData.pageNumber
      )
    },
    handleCurrentChange(val) {
      page = val
      this.getData('', '', '', page)
    }
  }
}
var page = 1
</script>
<style scoped>
.page {
  float: right;
  margin: 10px 0;
}
.el-card {
  margin: 5px;
}
</style>

